﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Canvas自适应宽度大转盘抽奖代码 - A5源码</title>

		<style type="text/css">
			body,
			ul,
			ol,
			li,
			p,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			form,
			fieldset,
			table,
			td,
			img,
			div {
				margin: 0;
				padding: 0;
				border: 0;
			}

			body {
				color: #333;
				font-size: 12px;
				font-family: "Microsoft YaHei"
			}

			ul,
			ol {
				list-style-type: none;
			}

			select,
			input,
			img,
			select {
				vertical-align: middle;
			}

			input {
				font-size: 12px;
			}

			a {
				text-decoration: none;
				color: #000;
			}

			a:hover {
				color: #c00;
				text-decoration: none;
			}

			.clear {
				clear: both;
			}
			/* 大转盘样式 */

			.banner {
				display: block;
				width: 95%;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 20px;
			}
			/*控制箭头*/

			.banner .turnplate {
				display: block;
				width: 100%;
				position: relative;
			}
			/*控制容器*/

			.banner .turnplate canvas.item {
				width: 100%;
			}
			/*控制边框*/

			.banner .turnplate img.pointer {
				position: absolute;
				width: 36%;
				height: 40%;
				left: 32%;
				top: 28%;
			}

			.more {
				display: block;
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				height: 150px;
			}

			.cloud {
				position: fixed;
				left: 0;
				top: 70%;
				width: 150px;
			}

			.cloud2 {
				position: fixed;
				right: 0;
				top: 32%;
				width: 50px;
			}

			.cloud3 {
				position: fixed;
				left: 0;
				top: 30%;
				width: 100px;
			}
			/*不同大小显示相同的背景*/

			@media screen and (max-width: 320px) {
				.cloud {
					position: fixed;
					left: 0;
					top: 70%;
					width: 150px;
				}
				.cloud2 {
					position: fixed;
					right: 0;
					top: 30%;
					width: 50px;
				}
				.cloud3 {
					position: fixed;
					left: 0;
					top: 23%;
					width: 100px;
				}
			}

			@media screen and (min-width: 321px) and (max-width: 375px) {
				.cloud {
					position: fixed;
					left: 0;
					top: 72%;
					width: 150px;
				}
				.cloud2 {
					position: fixed;
					right: 0;
					top: 32%;
					width: 50px;
				}
				.cloud3 {
					position: fixed;
					left: 0;
					top: 25%;
					width: 100px;
				}
			}

			@media screen and (min-width: 376px) {
				.cloud {
					position: fixed;
					left: 0;
					top: 68%;
					width: 150px;
				}
				.cloud2 {
					position: fixed;
					right: 0;
					top: 32%;
					width: 50px;
				}
				.cloud3 {
					position: fixed;
					left: 0;
					top: 25%;
					width: 100px;
				}
			}

			@media screen and (max-height: 480px) {
				.cloud {
					position: fixed;
					left: 0;
					top: 81%;
					width: 150px;
				}
				.cloud2 {
					position: fixed;
					right: 0;
					top: 35%;
					width: 50px;
				}
				.cloud3 {
					position: fixed;
					left: 0;
					top: 27%;
					width: 100px;
				}
			}

			#mark {
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				position: fixed;
				top: 0;
				left: 0;
				display: none;
			}

			.red-img {
				position: fixed;
				top: 10%;
				left: 5%;
				width: 90%;
			}
			.pad_right {
				padding-right: 2em;
			}
			#scroll_begin,
			#scroll_end {
				display: inline;
			}
			#scroll_div {
				overflow: hidden;
				white-space: nowrap;
				background: rgba(47, 79, 79, 0.4);
				line-height: 25px;
				color: white;
				font-size: 10px;
			}
		</style>

		<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
		<script type="text/javascript" src="js/awardRotate.js"></script>
		<!--<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>-->

		<script type="text/javascript">
			//更改系统消息提醒
			window.alert = function(str) {
				var shield = document.createElement("DIV");
				shield.id = "shield";
				shield.style.position = "absolute";
				shield.style.left = "50%";
				shield.style.top = "50%";
				shield.style.width = "280px";
				shield.style.height = "150px";
				shield.style.marginLeft = "-140px";
				shield.style.marginTop = "-110px";
				shield.style.zIndex = "25";
				var alertFram = document.createElement("DIV");
				alertFram.id = "alertFram";
				alertFram.style.position = "absolute";
				alertFram.style.width = "280px";
				alertFram.style.height = "150px";
				alertFram.style.left = "50%";
				alertFram.style.top = "50%";
				alertFram.style.marginLeft = "-140px";
				alertFram.style.marginTop = "-110px";
				alertFram.style.textAlign = "center";
				alertFram.style.lineHeight = "150px";
				alertFram.style.zIndex = "300";
				strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
				strHtml += " <li style=\"background:orange;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\">[中奖提醒]</li>\n";
				strHtml += " <li style=\"background:white;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">" + str + "</li>\n";
				strHtml += " <li style=\"background:orange;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" style=\"width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px\"/></li>\n";
				strHtml += "</ul>\n";
				alertFram.innerHTML = strHtml;
				document.body.appendChild(alertFram);
				document.body.appendChild(shield);
				this.doOk = function() {
					alertFram.style.display = "none";
					shield.style.display = "none";
				}
				alertFram.focus();
				document.body.onselectstart = function() {
					return false;
				};
			}
			/*此处初始化 获取奖品数据 以及抽奖次数*/
			//---
			//转盘 奖品数据
			var turnplate = {
				restaraunts: [], //大转盘奖品名称
				colors: [], //大转盘奖品区块对应背景颜色
				images: [], //图片
				outsideRadius: 180, //大转盘外圆的半径
				textRadius: 155, //大转盘奖品位置距离圆心的距离
				insideRadius: 68, //大转盘内圆的半径
				startAngle: 0, //开始角度
				bRotate: false //false:停止;ture:旋转
			};

			$(document).ready(function() {
				//动态添加大转盘的奖品与奖品区域背景颜色
				turnplate.restaraunts = ["碧根果一袋0", "年货红包1", "水果拼盘2", "300元月卡3", "2元现金红包4", "夏威夷果一袋5", "3元现金红包6", "松子一袋 7", "5元现金红包8"];
				turnplate.colors = ["#FFFFFF", "#5fcbd5", "#FFFFFF", "#5fcbd5", "#FFFFFF", "#5fcbd5", "#FFFFFF", "#5fcbd5", "#FFFFFF"];
				turnplate.images = ["images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png", "images/6.png", "images/5.png", "images/7.png", "images/5.png"];
				//超时执行方法
				var rotateTimeOut = function() {
					$('#wheelcanvas').rotate({
						angle: 0,
						animateTo: 2160,
						duration: 8000,
						callback: function() {
							alert('网络超时，请检查您的网络设置！');
						}
					});
				};
				//显示奖品图片
				var imgs_div = document.querySelectorAll('.img-jp');
				for(var i = 0; i < turnplate.images.length; i++) {
					imgs_div[i].src = turnplate.images[i];
				}
				//旋转转盘 item:奖品位置; txt：提示语;
				var rotateFn = function(item, txt) {
					var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
					if(angles < 270) {
						angles = 270 - angles;
					} else {
						angles = 360 - angles + 270;
					}
					$('#wheelcanvas').stopRotate();
					$('#wheelcanvas').rotate({
						angle: 0,
						animateTo: angles + 1800,
						duration: 8000,
						callback: function() { //回调
							turnplate.bRotate = false;
							alert('恭喜中奖了' + txt);

						}
					});
				};
				//指针点击事件
				$('.pointer').click(function() {
					console.log("开始抽奖======");
					console.log(turnplate.bRotate);
					if(turnplate.bRotate) return;
					turnplate.bRotate = !turnplate.bRotate;
					//请求服务器 点击后获取中奖 物品

					//旋转 直到服务器返回 响应
					$('#wheelcanvas').rotate({
						angle: 0,
						animateTo: 180000,
						duration: 3000
					});
					//获取随机数(奖品个数范围内)
					//					var item = rnd(1, turnplate.restaraunts.length);
					var item = 1;
					console.log(item);
					console.log(turnplate.restaraunts[item - 1]);
					//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
					setTimeout(function() {
						rotateFn(item, turnplate.restaraunts[item - 1]);
					}, 2000);
					/* switch (item) {
						case 1:
							rotateFn(252, turnplate.restaraunts[0]);
							break;
						case 2:
							rotateFn(216, turnplate.restaraunts[1]);
							break;
						case 3:
							rotateFn(180, turnplate.restaraunts[2]);
							break;
						case 4:
							rotateFn(144, turnplate.restaraunts[3]);
							break;
						case 5:
							rotateFn(108, turnplate.restaraunts[4]);
							break;
						case 6:
							rotateFn(72, turnplate.restaraunts[5]);
							break;
						case 7:
							rotateFn(36, turnplate.restaraunts[6]);
							break;
						case 8:
							rotateFn(360, turnplate.restaraunts[7]);
							break;
						case 9:
							rotateFn(324, turnplate.restaraunts[8]);
							break;
						case 10:
							rotateFn(288, turnplate.restaraunts[9]);
							break;
					} */
					console.log(item);
				});
			});

			function rnd(n, m) {
				var random = Math.floor(Math.random() * (m - n + 1) + n);
				return random;

			}

			//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
			window.onload = function() {
				drawRouletteWheel();
			};

			function drawRouletteWheel() {
				var canvas = document.getElementById("wheelcanvas");
				var imgs_div = document.querySelectorAll('.img-jp');
				if(canvas.getContext) {
					//根据奖品个数计算圆周角度
					var arc = Math.PI / (turnplate.restaraunts.length / 2);
					var ctx = canvas.getContext("2d");
					//在给定矩形内清空一个矩形
					ctx.clearRect(0, 0, 422, 422);
					//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
					ctx.strokeStyle = "#FFBE04";
					//font 属性设置或返回画布上文本内容的当前字体属性
					ctx.font = 'bold 18px Microsoft YaHei';
					for(var i = 0; i < turnplate.restaraunts.length; i++) {
						var angle = turnplate.startAngle + i * arc;
						ctx.fillStyle = turnplate.colors[i];
						ctx.beginPath();
						//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
						ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
						ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
						ctx.stroke();
						ctx.fill();
						//锁画布(为了保存之前的画布状态)
						ctx.save();

						//改变画布文字颜色
						var b = i + 2;
						if(b % 2) {
							ctx.fillStyle = "#FFFFFF";
						} else {
							ctx.fillStyle = "#E5302F";
						};

						//----绘制奖品开始----

						var text = turnplate.restaraunts[i];
						var line_height = 17;
						//translate方法重新映射画布上的 (0,0) 位置
						ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

						//rotate方法旋转当前的绘图
						ctx.rotate(angle + arc / 2 + Math.PI / 2);

						/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
						if(text.indexOf("盘") > 0) { //判断字符进行换行
							var texts = text.split("盘");
							for(var j = 0; j < texts.length; j++) {
								ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : 'bold 18px Microsoft YaHei';
								if(j == 0) {
									ctx.fillText(texts[j] + "盘", -ctx.measureText(texts[j] + "盘").width / 2, j * line_height);
								} else {
									ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height * 1.2); //调整行间距
								}
							}
						} else if(text.indexOf("盘") == -1 && text.length > 8) { //奖品名称长度超过一定范围
							text = text.substring(0, 8) + "||" + text.substring(8);
							var texts = text.split("||");
							for(var j = 0; j < texts.length; j++) {
								ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
							}
						} else {

							//在画布上绘制填色的文本。文本的默认颜色是黑色

							//measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
							ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
						}

						//添加对应图标
						//此处 适用于 奖品图片不特殊 大小拆不多 时
						imgs_div[i].onload = function() {
							ctx.drawImage(imgs_div[i], -35, 20);
						};
						ctx.drawImage(imgs_div[i], -35, 20);
						//特定化 图片设置
						//						if(text.indexOf(turnplate.restaraunts[0]) >= 0) {
						//							var img = document.getElementById("shan-img");
						//							img.onload = function() {
						//								ctx.drawImage(img, -35, 20);
						//							};
						//							ctx.drawImage(img, -35, 20);
						//						};
						//						if(text.indexOf(turnplate.restaraunts[1]) >= 0) {
						//							var img = document.getElementById("diy1-img");
						//							img.onload = function() {
						//								ctx.drawImage(img, -20, 20);
						//							};
						//							ctx.drawImage(img, -20, 20);
						//						};
						//						if(text.indexOf(turnplate.restaraunts[2]) >= 0) {
						//							var img = document.getElementById("diy2-img");
						//							img.onload = function() {
						//								ctx.drawImage(img, -20, 20);
						//							};
						//							ctx.drawImage(img, -20, 20);
						//						};
						//						if(text.indexOf(turnplate.restaraunts[3]) >= 0) {
						//							var img = document.getElementById("diy3-img");
						//							img.onload = function() {
						//								ctx.drawImage(img, -35, 20);
						//							};
						//							ctx.drawImage(img, -35, 20);
						//						};
						//						if(text.indexOf(turnplate.restaraunts[4]) >= 0) {
						//							var img = document.getElementById("diy4-img");
						//							img.onload = function() {
						//								ctx.drawImage(img, -30, 20);
						//							};
						//							ctx.drawImage(img, -30, 20);
						//						};
						//						if(text.indexOf(turnplate.restaraunts[5]) >= 0) {
						//							var img = document.getElementById("diy5-img");
						//							img.onload = function() {
						//								ctx.drawImage(img, -35, 20);
						//							};
						//							ctx.drawImage(img, -35, 20);
						//						};
						//						if(text.indexOf(turnplate.restaraunts[6]) >= 0) {
						//							var img = document.getElementById("diy6-img");
						//							img.onload = function() {
						//								ctx.drawImage(img, -30, 20);
						//							};
						//							ctx.drawImage(img, -30, 20);
						//						};
						//
						//						if(text.indexOf(turnplate.restaraunts[7]) >= 0) {
						//							var img = document.getElementById("diy7-img");
						//							img.onload = function() {
						//								ctx.drawImage(img, -35, 20);
						//							};
						//							ctx.drawImage(img, -35, 20);
						//						};
						//
						//						if(text.indexOf(turnplate.restaraunts[8]) >= 0) {
						//							var img = document.getElementById("diy8-img");
						//							img.onload = function() {
						//								ctx.drawImage(img, -35, 20);
						//							};
						//							ctx.drawImage(img, -35, 20);
						//						};

						//把当前画布返回（调整）到上一个save()状态之前
						ctx.restore();
						//----绘制奖品结束----
					}
				}
			};
		</script>
	</head>

	<body style="background:url(images/body_bg2.jpg);background-size:cover;background-repeat: no-repeat;">
		<div id="scroll_div" class="fl">
			<div id="scroll_begin">
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
			</div>
			<div id="scroll_end"></div>
		</div>

		<Marquee  style="white-space: nowrap;">
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
		</Marquee>
		<img class="img-jp" src="images/1.png" id="shan-img" style="display:none;" />
		<img class="img-jp" src="images/1.png" id="diy1-img" style="display:none;" />
		<img class="img-jp" src="images/2.png" id="diy2-img" style="display:none;" />
		<img class="img-jp" src="images/3.png" id="diy3-img" style="display:none;" />
		<img class="img-jp" src="images/4.png" id="diy4-img" style="display:none;" />
		<img class="img-jp" src="images/5.png" id="diy5-img" style="display:none;" />
		<img class="img-jp" src="images/6.png" id="diy6-img" style="display:none;" />
		<img class="img-jp" src="images/7.png" id="diy7-img" style="display:none;" />
		<img class="img-jp" src="images/7.png" id="diy8-img" style="display:none;" />
		<img class="img-jp" src="images/7.png" id="diy9-img" style="display:none;" />
		<div class="banner" style="margin-top: 35%">
			<div class="turnplate" style="background-image:url(images/cj_bg.png);background-size:100% 100%;">
				<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
				<img class="pointer" src="images/jt2.png" />
			</div>
		</div>
		<a href="#" class="more"></a>
		<img src="images/9.png" class="cloud">
		<img src="images/10.png" class="cloud2">
		<img src="images/11.png" class="cloud3">

		<div style="text-align:center;margin:50px 0; font:normal 14px/24px '黑体';">
		</div>

	</body>
	<script>
		//文字横向滚动
		function ScrollImgLeft() {
			var speed = 50;
			var MyMar = null;
			var scroll_begin = document.getElementById("scroll_begin");
			var scroll_end = document.getElementById("scroll_end");
			var scroll_div = document.getElementById("scroll_div");
			scroll_end.innerHTML = scroll_begin.innerHTML;

			function Marquee() {
				if(scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
					scroll_div.scrollLeft -= scroll_begin.offsetWidth;
				else
					scroll_div.scrollLeft++;
			}
			MyMar = setInterval(Marquee, speed);
			scroll_div.onmouseover = function() {　　　　　　　
				clearInterval(MyMar);　　　　　
			}　　　　
			scroll_div.onmouseout = function() {　　　　　　　
				MyMar = setInterval(Marquee, speed);　　　　　　　　　
			}
		}
		ScrollImgLeft();
	</script>

</html>